page {
    background: #F8F8F8;
}

.order-status {
    height: 125rpx;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #444444;
    padding: 0 30rpx;
    box-sizing: border-box;
    background: url(https://ruiyuanhui.3todo.com/uploads/img/exchangedetail_bg.png) no-repeat;
    background-size: 100% 100%;
}

.order-address {
    margin-top: -5rpx;
    padding: 35rpx 30rpx;
    box-sizing: border-box;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    width: 100%;
    background: #fff;
    border-bottom: 24rpx solid #f8f8f8;

    .header-top {
        display: flex;
        height: 60rpx;

        .name {
            font-size: 32rpx;
            color: #333333;
        }

        .telphone {
            margin-left: 30rpx;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .address {
        color: #666666;
        font-size: 28rpx;
        display: flex;

        .addr {
            flex: 1;
            color: #333333;
        }
    }
}

.middle-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    padding: 40rpx 40rpx 40rpx 24rpx;
    box-sizing: border-box;
    border-bottom: 24rpx solid #f8f8f8;

    .good-img {
        width: 176rpx;
        height: 176rpx;
        border-radius: 4rpx;
    }

    .rt {
        flex: 1;
        padding-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .good-title {
            font-size: 28rpx;
            color: #333333;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
        }

        .good-intro {
            font-size: 28rpx;
            color: #999999;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
        }

        .good-price-num {
            display: flex;
            justify-content: space-between;

            .good-price {
                font-size: 28rpx;
                color: #f1001e;
            }

            .good-num {
                font-size: 26rpx;
                color: #999999;
            }
        }
    }
}



.order-id,
.order-id1 {
    height: 75rpx;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;

    .id-title {
        font-size: 30rpx;
        color: #666666;
    }

    .id-desc {
        display: flex;
        align-items: center;

        .copy {
            width: 100rpx;
            height: 40rpx;
            border-radius: 30rpx;
            border: 1rpx solid rgba(219, 219, 219, 1);
            font-size: 28rpx;
            color: #DDA661;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .id-num {
            margin-left: 20rpx;
            font-size: 30rpx;
            color: #333333;
        }
    }
}

.order-id1 {
    height: 105rpx;
    align-items: center;
}

.needpay {
    padding: 0 30rpx;
    box-sizing: border-box;
    height: 100rpx;
    display: flex;
    align-items: center;
    background: #fff;
    justify-content: space-between;
    border-top: 1rpx solid #DBDBDB;

    .pay-title {
        font-size: 30rpx;
        color: #666666;
    }

    .pay-desc {
        display: flex;
        align-items: center;

        .pay-num {
            font-size: 30rpx;
            color: #4a4a4a;
        }

        .pay-money {
            margin-left: 30rpx;
            font-size: 30rpx;
            color: #333333;
        }
    }
}

.paymoney {
    height: 110rpx;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    position: fixed;
    bottom: 0;
    padding: 0 30rpx;
    box-sizing: border-box;
    .all {
        font-size: 30rpx;
        color: #666666;
        display: flex;
        align-items: center;

        .paymoney-num {
            font-size: 34rpx;
            color: rgba(242, 28, 54, 1);
        }
    }
    .wxpay {
        width: 200rpx;
        height: 60rpx;
        background: #E2B884;
        border-radius: 30rpx;
        font-size: 32rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.my-appraise {
    border-top: 24rpx solid #f8f8f8;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;

    .appraise-title {
        font-size: 30rpx;
        color: #666666;
    }

    .appraise-text {
        margin-top: 24rpx;
        font-size: 30rpx;
        color: #333333;
    }

    .appraise-img {
        margin-top: 24rpx;
        display: flex;
        flex-wrap: wrap;

        image {
            width: 160rpx;
            height: 160rpx;
            background: rgba(216, 216, 216, 1);
            border-radius: 4rpx;
            margin-right: 16rpx;
            margin-bottom: 16rpx;
        }
        image:nth-of-type(4n){
            margin-right: 0;
        }
    }
}
.recommend-good {
    padding: 0rpx 30rpx 10rpx 30rpx;
    box-sizing: border-box;
    border-top: 24rpx solid #f3f3f3;
    .title {
        height: 90rpx;
        display: flex;
        align-items: center;
        // justify-content: center;

        view {
            // &:nth-of-type(1) {
            //     width: 36rpx;
            //     height: 2rpx;
            //     background: #bebebe;
            //     margin-right: 26rpx;
            // }

            &:nth-of-type(1) {
                font-size: 30rpx;
                font-weight: bold;
                color: #333333;
                margin-right: 24rpx;
                line-height: 30rpx;
            }

            // &:last-child {
            //     width: 36rpx;
            //     height: 2rpx;
            //     background: #bebebe;
            // }
        }

        image {
            margin-right: 10rpx;
            width: 34rpx;
            height: 32rpx;
        }
    }

    .recommend-goods {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .goods-item {
            width: 336rpx;
            // height: 530rpx;
            margin-bottom: 20rpx;

            image {
                border: 2rpx solid #dbdbdb;
                border-radius: 12rpx 12rpx 0px 0px;
                
                display: flex;
                width: 99%;
                height: 320rpx;
                border-radius: 12rpx 12rpx 0px 0px;
            }

            .goods-info {
                width: 100%;
                height: 241rpx;
                background: #ffffff;
                border-radius: 0px 0px 12rpx 12rpx;
                padding: 20rpx 22rpx;
                box-sizing: border-box;
                border: 2rpx solid rgba(219, 219, 219, 1);

                .goods-title {
                    font-size: 30rpx;
                    color: #666666;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    height: 80rpx;
                }

                .integral {
                    margin-top: 10rpx;

                    .num {
                        font-size: 30rpx;
                        color: #fb3319;
                        flex: 1;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        word-break: break-all;
                    }

                    .exchange {
                        width: 136rpx;
                        height: 44rpx;
                        background: linear-gradient(224deg, rgba(102, 102, 102, 1) 0%, rgba(68, 68, 68, 1) 100%);
                        border-radius: 0px 20rpx 0px 20rpx;
                        font-size: 28rpx;
                        color: #FFC875;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-left: auto;
                        margin-top: 20rpx;
                    }
                }
            }
        }

    }
}
.no-have-exchange {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 32rpx;
    color: rgba(102, 102, 102, 1);
    width: 100%;
    margin:50rpx 0;
    .no-have-data {
        width: 320rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
    }
}